import React, { Component } from 'react'
// 创建context对象
const UserNameContext = React.createContext()
const { Provider, Consumer } = UserNameContext
export default class A extends Component {
    state = {
        name: 'tom'
    }
    render() {
        return (
            <div>
                <h1>名称是{this.state.name}</h1>
                {/* value = {xxx} 向孙子以及向下组件传递数据*/}
                <Provider value={this.state.name}>
                    <B />
                </Provider>
            </div>
        )
    }
}

class B extends Component {
    // static contextType = 创建的context对象 
    // 如果想要接收祖组件的数据 必须声明
    // this.context 接收数据
    render() {
        return (
            <div>
                <h2>名称是???</h2>
                <C />
            </div>
        )
    }
}
class C extends Component {
    static contextType = UserNameContext
    render() {
        console.log(this.context);
        return (
            <div>
                <h3>名称是 {this.context} </h3>
                <D />
            </div>
        )
    }
}
// 函数式组件的用法
function D() {
    return (
        <div>
            <Consumer>
                {
                    v => v
                }
            </Consumer>
        </div>
    )
}